<template>
  <div>

      <div class="shouyiview-carditem yinying" v-for="(item,index) of list" @click="xiangqingclick(item)"  :key="index">
        <van-row offset="4" class="textaligncenter">
          <van-col span="18" style="padding-left:0.5rem">
              <div style="line-height:1rem" >
                   <div class="paddingzy shenglue">
                      账单编号：{{item.billNo}}
                  </div>
                  <div class="paddingzy shenglue">
                      公司名称：{{item.corpName}}
                  </div>
                   <div class="paddingzy shenglue">
                      支付金额：{{item.payPrice}}
                  </div>
                  <div class="paddingzy shenglue">
                      创建时间：{{item.createTime | retime}}
                  </div>
              </div>
          </van-col>
          <van-col class="textaligncenter-info2" span="6">{{item.datastatus | redatastatus}}</van-col>
        </van-row>
      </div>
        <data-status :status="dataStatus"></data-status>
  </div>
</template>


<script>
import dataStatus from "../../../../components/commons/dataStatus";
export default {
  data() {
    return {
        dataStatus:'-1',
      list: null,
      liatquery: {
        pageNum: 1,
        pageSize: 10,
        status:1
      }
    };
  },
  components: { dataStatus },
  created() {
    this.getlist();
  },
  props:{
      active:{
          type:Number
      }
  },
  watch:{
      active(e,v){
          this.liatquery.status = e+1
          this.getlist()
      }
  },
  filters: {
    redatastatus(e) {
      switch (e) {
        case 1:
          return "待打款";
          break;
        case 2:
          return "确认打款";
          break;
        case 3:
          return "已确认";
          break;
        case 4:
          return "已失效";
          break;
      }
    },
    retime(e){
        return new Date(parseInt(e) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " "); 
    }
  },
  methods: {
    getlist() {
        this.list = []
        this.dataStatus = '-1'
      this.$Api
        .get("/api/bill/getConditionBill", this.liatquery)
        .then(res => {
          if (res.data.code == 200) {
              if (res.data.data.result == null) {
                  this.dataStatus = '0'
              }else{
                   this.list = res.data.data.result;
              }
          }else{
              this.dataStatus = '1'
          }
        })
        .catch(err => {});
    },
    xiangqingclick(e){
        this.$emit("xiangqing",e)
    }
  }
};
</script>



<style scoped>
.shouyiview-carditem {
  background-color: #ffffff;
  margin: 0.5rem 0;
}

.yinying {
	box-shadow: 0 0 20upx rgba(0, 0, 0, 0.3);
}

.paddingzy{
        padding-right: .3rem;
}

.shenglue{
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

.shouyiview-carditem-info1 {
  flex: 5;
}

.shouyiview-carditem-info2 {
  flex: 1;
}

.textaligncenter {
  text-align: left;
 
  padding: 1rem 0;
}

.textaligncenter-info2{
    line-height: 4rem;
}
</style>